<!-- 用电折现图 -->
<template>
  <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
</template>

<script>
import { color } from 'echarts';
import { getCurrentInstance, onMounted } from 'vue';


export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;

    onMounted(() => {
      const dom = document.getElementById('myChart');
      const myChart = echarts.init(dom); // 初始化echarts实例
      const option = {
        // 设置背景色
        backgroundColor: 'rgba(8, 22, 34, 1)',
        animationDuration: 2500,
        animationEasing: 'cubicInOut',

        legend: {
          data: ['去年用电量', '今年用电量'],
          textStyle: {
            color: 'white',
          },
        },

        title: {
          text: '月用电对比',
          subtext: '',
          left: 'left',
          top: 5, // 定位
          left: 20,
          // 定位
          textStyle: {
            color: 'white',
            fontSize: 20,
          },
          subtextStyle: {
            // 副标题样式
            color: "#00FFFF",
            fontSize: 16,
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: '15%',
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },

        tooltip: {    //提示框组件   
          trigger: 'item',
          lineStyle: {
            color: "#000",
            width: 0.5,
            type: "solid",
          },
        },
        xAxis: {
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              width: 0,//0可以隐藏
            }
          },
        },
        emphasis: {
          focus: 'series'
        },
        series: [
          {
            name: '去年用电量',
            color : '#7DD9FE',
            type: 'line',
            data: [23, 24, 18, 25, 27, 28, 25, 30, 34, 26, 15, 18],
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                          formatter: function (data) {
                         return data.value + '°'
                       },
                           textStyle: {	    //数值样式
                              color: 'white',
                              fontSize: 12
                           }
                       }
                   }
               }
          },
          {
            name: '今年用电量',
            color : '#00FFFF',
            type: 'line',
            data: [26, 24, 18, 22, 23, 20, 27, 23, 24, 18, 25, 27],
            itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           formatter: function (data) {
                         return data.value + '°'
                       },
                           textStyle: {	    //数值样式
                               color: 'white',
                               fontSize: 12
                           }
                       },
                   }
                  }
          }
        ]
      };

      // 设置实例参数
      myChart.setOption(option);
    });
    return {};
  }

};
</script>